<template>
    <div>
        <!-- This is City page -->
        <mt-index-list>
            <mt-index-section v-for="cities in cityArr" :index="cities.index" :key="cities.index">
                <!-- 原组件不支持click事件，可以加上一个div -->
                <div v-for="city in cities.list" :key="city.cityId" @click="handleClick(city)">
                    <mt-cell :title="city.name"></mt-cell>
                </div>
            </mt-index-section>
        </mt-index-list>
    </div>
</template>

<script>
import Axios from 'axios';

export default {
    data() {
        return {
            cityArr: []
        };
    },
    beforeMount() {
        this.$store.commit('tabbarMutation', false);
    },
    mounted() {
        Axios({
            url: 'https://m.maizuo.com/gateway?k=9266509',
            method: 'GET',
            headers: {
                'X-Client-Info': '{"a":"3000","ch":"1002","v":"5.0.4","e":"159668407331181462568961"}',
                'X-Host': 'mall.film-ticket.city.list'
            }
        }).then(res => {
            this.cityArr = this.getLetterArr(res.data.data.cities);
        });
    },
    beforeDestroy() {
        this.$store.commit('tabbarMutation', true);
    },
    methods: {
        getLetterArr(data) {
            const letterArr = [];
            for (let i = 65; i < 91; i++) {
                letterArr.push(String.fromCharCode(i));
            }

            const newletterArr = [];
            letterArr.forEach(element => {
                const arr = data.filter(item => item.pinyin.substring(0, 1) === element.toLowerCase());
                if (arr.length > 0) {
                    newletterArr.push({
                        index: element,
                        list: arr
                    });
                }
            });
            return newletterArr;
        },
        handleClick(city) {
            localStorage.setItem('cityId', city.cityId);
            localStorage.setItem('cityName', city.name);
            this.$router.push('/cinema');
        }
    }
};
</script>

<style lang="scss" scoped></style>
